<template>
    <el-form :inline="true" :model="search" class="demo-form-inline">
        <el-form-item label="投资人">
            <el-input v-model="station.userName" />
        </el-form-item>
        <el-form-item label="站点名称">
            <el-input v-model="station.stationName" />
        </el-form-item>
        <el-form-item label="状态">
            <el-input v-model="station.status" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="getStaffList">查询</el-button>
        </el-form-item>
    </el-form>

    <div class="add-div">
        <el-button type="primary" plain @click="add">新增</el-button>
    </div>
    <!-- table -->
    <el-table :data="stationList" style="width: 80%">
        <el-table-column prop="userName" label="投资人" width="100" />
        <el-table-column prop="stationName" label="站点名称" width="220" />
        <el-table-column prop="address" label="详细地址" width="300" />
        <el-table-column prop="status" label="状态" width="100" />
        <el-table-column prop="createTime" label="创建时间" width="120" />
        <el-table-column fixed="right" label="操作" width="180">
            <template #default="{ row }">
                <el-button link type="primary" size="small" @click="Edit(row)">修改</el-button>
                <el-button link type="primary" size="small" @click="Detail(row)">详情</el-button>
                <el-button link type="primary" size="small" @click="Delete(row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- dialog -->
    <el-dialog width="30%" :modal="staffInfo" v-model="dialogDetailVisible">
        <el-form ref="formRef" label-width="100px">
            <el-form-item label="投资人">
                <el-input v-model="station.userName"></el-input>
            </el-form-item>
            <el-form-item label="站点名称">
                <el-input v-model="station.stationName"></el-input>
            </el-form-item>
            <el-form-item label="地址">
                <el-input v-model="station.address"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-input v-model="station.status"></el-input>
            </el-form-item>
            <el-form-item label="创建时间">
                <el-input v-model="station.createTime"></el-input>
            </el-form-item>
            <el-form-item>
                <!-- <el-button type="primary" @click="onSubmitDetail">提交</el-button> -->
                <el-button type="primary" @click="DetailClose">关闭</el-button>
                </el-form-item>
            </el-form>
    </el-dialog>
</template>
<script setup>
import { ref } from 'vue'
import { ElMessage,ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
//table部分
//定义一个数据模型
var station = ref({
    userName: '',
    stationName: '',
    address: '',
    status: '',
    createTime: ''
});

// 定义一个list用来接收后端返回的数据列表
var stationList = ref([]);
//定义一个标识---是否需要展示dialog
var dialogDetailVisible=ref(false);

GetStationList();

function GetStationList() {
    stationList.value = [
        {
            userName: '勇哥',
            stationName: '沈阳市A站1号',
            address: '辽宁省沈阳市xxxxxxx',
            status: '运营中',
            createTime: '2024-09-16'
        },
        {
            userName: '苗哥',
            stationName: '北京市A站1号',
            address: '北京市朝阳区xxxxxxx',
            status: '建设中',
            createTime: '2024-09-16'
        }
    ]
}

// 详情

function Detail(data) {
    station.value={...data};
    dialogDetailVisible.value=true;
}
function DetailClose() {
    dialogDetailVisible.value=false;
}


function Edit() {
    dialogDetailVisible.value=true;
}
function Delete() {
    ElMessageBox.confirm(
        '是否确认删除',
        '提醒', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
    }
    ).then(() => {
        console.info("delete station");
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '删除取消'
        })
    })
}

</script>